<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<%@ include file="/common/${projectName}/include/common-base.jsp" %>
	<title>${template.titleName}</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<!-- Part 一、 以下是body主体内容的模块区域 -->
<body class="hold-transition ${r'${sysColor}'} sidebar-mini">
<div class="wrapper">

	<!-- top start -->
	<%@include file="/common/${projectName}/top.jsp" %>
	<!-- top end -->
	<!-- left start -->
	<%@include file="/common/${projectName}/left.jsp" %>
	<!-- left end-->

	<div class="content-wrapper">
		<!-- Main start -->
		<section class="content">
            <div id="div_hidden_content" class="hidden" style="display:none;">
                <input name="templateType" type="hidden" value="tabAdd"/>
                <div id="hidden_common_final">
                    <!-- temp="hidden_common_final" start -->
                    <!-- temp="hidden_common_final" end -->
                 </div>
                 <!-- temp="backForm1_hidden" start -->
                 <!-- temp="backForm1_hidden" end -->
            </div>
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">${template.titleName}</h3>
                    <button type="button" class="btn btn-default btn-sm pull-right" onclick="goBack()" data-temp-event="backForm1_hidden"><i class="fa fa-reply"></i> 返回 </button>
                </div>
                <div class="box-body">
					<ul class="nav nav-tabs">
                        <#if (detailList?size > 1)><#--detailList记录数大于1时分tab显示-->
                        <#list detailList as detail>
                        <#assign tabNo = detail.tabNo>
                        <li<#if detail.tabNo =="1"> class="active"</#if>><a href="#tab_${tabNo}" data-toggle="tab">${detail.tabName}</a></li>
                        </#list>
                        </#if>
					</ul>
					<div class="tab-content">
					    <#list detailList as detail>
                        <#assign tabNo = detail.tabNo>
                        <#assign formType = detail.formType>
                        <div class="tab-pane <#if (detail_index==0)>active</#if>" id="tab_${tabNo}">
							<div class="box-body">
							    <form class="form-horizontal ${formType}Body" role="form" id="${formType}${tabNo}" action="javascript:void(0)">
									<input type="hidden" class="formToken" id="${formType}${tabNo}_formToken" name="formToken">
                                    <!-- temp="${formType}${tabNo}_hidden" start -->
                                    <div id="${formType}${tabNo}_hidden"></div>
                                    <!-- temp="${formType}${tabNo}_hidden" end -->

                                    <!-- temp="${formType}${tabNo}_content" start -->
                                    <div id="${formType}${tabNo}_content" data-temp-code="true" data-temp-type="${formType}" data-temp-form-id="${formType}${tabNo}_content">
                                    </div>
							        <!-- temp="${formType}${tabNo}_content" end -->

								</form>
								<div class="box-footer text-center">
                                    <button class="btn btn-success" type="button" onclick="submitForm1(this);" data-temp-event="${formType}${tabNo}_hidden"><i class="fa fa-check"></i> 保存数据 </button> &nbsp;
                                    <button type="button" class="btn btn-warning" onclick="removeDataByFormId(this);"><i class="fa fa-close"></i> 重置 </button>
                                </div>
							</div>
						</div>
						 </#list>
					</div>
				</div>
			</div>
			<!-- Main end -->
			<script>
				var clickMenu = "${template.menuId}";
				var dictListMap = DictUtil.initDictAndDymic();
				var currFormId = "#addForm1",currTabId="#tab_1";

				//控制选项卡
				$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
					var lastTabId =  $(e.relatedTarget).attr("href");   // 上一次活动的标签页
					currTabId = $(e.target).attr("href");// 当前活动的标签页
					currFormId ='#'+$(currTabId).find("form").attr("id");
					var lastFormId ='#'+$(lastTabId).find("form").attr("id");
					console.log('shown.tab',lastTabId+"->"+lastFormId,currTabId+"->"+currFormId);
					mytools.cleanValidate(lastFormId);//销毁上次校验
					setValidate(currFormId);//定义add表单验证属性
					getTabDataInfo(currTabId);
				});

				$(function () {
					mytools.cleanData(currFormId);//清空表单元素上次填写的内容；
					setValidate(currFormId);//定义add表单验证属性
					mytools.cleanValidate(currFormId);//清空上次校验规则提示
					getTabDataInfo(currTabId);
				});

				var dateObject = $('.datepicker').datepicker( {
					language : 'zh-CN',
					//inline: true,
					todayBtn : "linked",
					format : "yyyy-mm-dd",
					autoclose: true
				}).on('hide',function(e) {
					//bootstrap-datepicker与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决方法
					//当日期选择框关闭时，执行刷新校验。
					var fieldName = $(this).attr("name");//获取当前元素name
					var formId = $(this).parents("form").eq(0).attr("id");//获取当前元素所在父层级中的就近的formId
					$("#"+formId).data('bootstrapValidator').updateStatus(fieldName,'NOT_VALIDATED',null).validateField(fieldName);
				});
				//重置表单内容及校验
				function removeDataByFormId(obj) {
				    var tabId = $(obj).parents("div.tab-pane").attr("id");
                    var formId = $("#"+tabId).find("form").attr("id");
					mytools.cleanData('#'+formId);
					setValidate('#'+formId);//定义add表单验证属性
					mytools.cleanValidate('#'+formId);
				}
				//返回上级
				function goBack() {
                    var backUrl = $("#backForm1_hidden").find("input[name='location']").val();
                    if(strUtil.isNull(backUrl)){
                        layer.alert("未设置返回地址");
                        return;
                    }
                    var purl = ctx+backUrl;
                    mytools.pjax(purl);
                }
				function getTabDataInfo(tabId){
					if(strUtil.isNull(tabId)){
						layer.alert("参数不能为空!");
						return;
					}
					var pageName='',objName='';
					if(strUtil.isNull(pageName)){
                        return;
                    }
					var paramData={};
					paramData["pageName"]=pageName;
					paramData["formName"]= 'searchForm';
					$.ajax({
						type: 'get',
						url: common_info_url,
						data: paramData,
						dataType: 'json',
						success: function (myData) {
							console.log('getTabDataInfo',myData);
							if (myData) {
								FormUtil.loadView(objName, myData[objName], tabId);
							}
						}
					});
				}
				//提交表单数据
				function submitForm1(obj){
				    var tabId = $(obj).parents("div.tab-pane").attr("id");
                    var formId = $("#"+tabId).find("form").attr("id");
                    var modalId= $(obj).parents("div.modal").attr("id");
                    console.log(tabId,formId,modalId);
					var index_load = layer.load(1, {shade: false});
					//校验规则-表单提交时触发
					var validate = $('#'+formId).data('bootstrapValidator').validate();
					if(!validate.isValid()){ //如果校验不通过就返回
						layer.close(index_load);
						return;
					}
					layer.close(index_load);
					var index_submit = layer.confirm('您确定要保存信息吗？', {btn: ['Yes','No'],closeBtn: 0,offset: '220px'}
							, function(){
								layer.close(index_submit);
								var result = submitForm(formId,tabId);
								if(result){
									layer.msg("信息保存成功！");
									removeDataByFormId(obj);
                                    // if(!strUtil.isNull(tabId)){
                                    // 	$('.nav-tabs a[href=\"#' + tabId + '\"]').tab('show'); // Select tab by name
                                    // }
								}
							});
				}

				//提交表单数据
				function submitForm(formId,tabId){
					var result;
					var index_load = layer.load(1, {shade: false});
					$.ajax({
						type:'post',
						url:common_submit_url,
						data:$("#"+formId).serialize(),
						async:false,
						dataType:'json',
						success: function(myData){
							console.log('submitForm',myData);
							if(myData.flag=="T" && myData.result){
								result = myData;
							}else{
								setToken();
								layer.alert(myData.msg);
							}
							layer.close(index_load);
						},
						error: function (e) {
							layer.close(index_load);
						}
					});
					return result;
				}

				//设置token
				function setToken(){
					$.ajax({
						type:'get',
						url:'/sendPage/token?token=true',
						dataType:'text',
						success: function(myData){
							console.log(myData);
							$('.formToken').val(myData);
						}
					});
				}
				/**** Part 三、以下是自定义新增方法  ****/
				function setValidate(id){
					console.log("setValidate.formId->"+id);
					$(id).each(function(){
						$(this).bootstrapValidator({
							feedbackIcons: {
								valid: 'glyphicon glyphicon-ok',
								invalid: 'glyphicon glyphicon-remove',
								validating: 'glyphicon glyphicon-refresh'
							},/** 以下需要结合实际业务清空补充个表单元素的验证规则 **/
							fields:{
								/** 可自定义新增验证规则
								 "uctUser.userEname":{
		    		 validators: {
		    			 regexp: {
		    				 regexp: /^[0-9]+$/,
		                      message: '只能是数字'
		                  }
		              }
		    	}
								 **/
							}
						});
					});
				}

			</script>
		</section>
	</div>
	<!-- /.content-wrapper -->
	<!-- foot start -->
	<%@include file="/common/${projectName}/foot.jsp" %><!-- 每个模块页面都有foot.jsp 在里面增加方法，添加选中-->
	<!-- foot start -->
</div>
</body>

</html>





